<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<style type="text/css">
#banner {position:relative; width:380px; height:221px; border:1px solid #666; overflow:hidden; font-size:8px} 
#banner_list img {border:0px;} 
#banner_bg {position:absolute; bottom:0;background-color:#e9eae5;height:30px;filter: Alpha(Opacity=30);z-index:1000;cursor:pointer; width:380px; } 
#banner_info{position:absolute; bottom:4px; left:5px;height:22px;color:#fff;z-index:1001;cursor:pointer} 
#banner_text {position:absolute;width:120px;z-index:1002; right:3px; bottom:3px;} 
#banner ul {position:absolute;list-style-type:none;filter: Alpha(Opacity=80);opacity:0.8; z-index:1002; 
margin:0; padding:0; bottom:3px; right:5px; height:20px} 
#banner ul li { padding:0 6px; line-height:13px;float:left;display:block;color:#FFF;border:#e5eaff 1px solid;background-color:#6f4f67;cursor:pointer; margin:0; font-size:6px;} 
.current{background-color: #e9eae5;color: #000;}
</style> 
<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" charset="utf-8" data-callback="true"></script>
		<meta property="qc:admins" content="261335666715753347256375" />
	<meta property="wb:webmaster" content="6572c1e6396a7365" />
     <link rel="stylesheet" type="text/css" href="/css/reset.css" />
     <link rel="stylesheet" type="text/css" href="/css/style_index.css" />
    <title>首页-笔飞美术作品</title>
    <%@include file="../common/js.jsp"%>
    <script type="text/javascript" src="/js/kf.js"></script>
    <%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
</head>
<body>
<div id="box">
     <%@include file="../common/header.jsp" %>
    <div id="main_div">
        <div class="site_map">
            <span class="fl">公告：</span>
            <div id="s1" class="scrollDiv">
            <ul>
            	<c:forEach items="${gonggao}" var="gg">
                	<li><a href="${gg.link }">${gg.title }</a></li>
                </c:forEach>
            </ul>
            </div>
            <script type="text/javascript">
            //公告
            function AutoScroll(obj){
	            $(obj).find("ul:first").animate({
		            marginTop:"-28px"
	            },500,function(){
		            $(this).css({marginTop:"0px"}).find("li:first").appendTo(this);
	            });
            }
            //主图
            function autoScrollBig(obj){
	            $(obj).find("ul:first").stop(true,false).animate({
		            marginTop:"430px"
	            },500,function(){
		            $(this).css({marginTop:"0px"}).find("li:first").appendTo(this);
	            });
            }
            
            var i = 0;
            function autoScrollBig2(obj){
            	if(i >= ${zhutuSize}){i=0;}
            	var topPx = -434 * i;
	            $(obj).find("ul:first").stop(true,false).animate({
		            top:topPx+"px"
	            },500);
	            i++;
            }
            
            $(document).ready(function(){
	            setInterval('AutoScroll("#s1")',3000);
	  	        setInterval('autoScrollBig2("#index_div")',5000);
            });
            </script>
        </div>
        
        <div id="index_div" style="position: relative;height: 430px;overflow: hidden;">
        	<ul  style="position:absolute;">
            	<c:forEach items="${zhutu}" var="zt">
                	<li> 
	                	<a href="${zt.link}">
	                		<img src="${zt.picture }" alt="" width="960px" height="430px"/>
	                	</a>
                	</li>
                </c:forEach>
            </ul>
          
        </div>
        <br/>
        <%@include file="../common/footer.jsp" %>
    </div>
    
    
</div>
		<div class="QQbox" id="divQQbox">
			<span class="close"><a href="#" onclick="hidediv()">×</a></span>
				<div id="banner"> 
					<div id="banner_bg"></div> 
					<div id="banner_info"></div> 
					<ul id="num_ul" class="num_ul"> 
					<li>1</li> 
					<li>2</li> 
					<li>3</li> 
					<li>4</li> 
					</ul> 
					<div id="banner_list"> 
						<c:forEach items="${fudongtu}" var="fdt">
		                	<li>
		                		<a href="${fdt.link}" target="_blank"><img src="${fdt.picture}" title="${fdt.title}" alt="${fdt.title}" width="350px;" height="195px;" style="margin: 14px"/></a> 
		                	</li>
	               		 </c:forEach>
					</div> 
			   </div> 
		</div>
		<script type="text/javascript">
		(function($){
			$.extend({
		lbShow:function(options){
			var defaults={
				picUL:"picUL",
				numsUL:"numsUL",
				styles:"click",
				time:4000  
			}
			var options=$.extend(defaults,options);
			var oPicUL=$("#"+options.picUL+" li");
			var oNumsUL=$("#"+options.numsUL+" li");
			var iPicLen=oPicUL.length;
			var index=1;
			var st;
			function lbOperate(indexM){
				oPicUL.eq(indexM).show().addClass("current").siblings().removeClass("current").hide();
				oNumsUL.eq(indexM).css({"background":"#000000",'color':'#FFFFFF'}).siblings().css({"background":"#FFFFFF",'color':'#000000'});	
			}
			lbOperate(0);
			function lunbo(){
				if(index==iPicLen){
					index=0;	
				}
				lbOperate(index);
				index++;
				st=setTimeout(lunbo,options.time);
			}
			
			st=setTimeout(lunbo,options.time);
			
			oPicUL.hover(function(){
				clearTimeout(st);						  
			},function(){
				index=$("#"+options.picUL).find(".current").index()+1;
				st=setTimeout(lunbo,options.time);	
			});
			
			if(options.styles=="hover"){
				oNumsUL.hover(function(){
					clearTimeout(st);
					lbOperate($(this).index());
					
				},function(){
					st=setTimeout(lunbo,options.time);
					index=$("#"+options.numsUL).find(".current").index()+1;	
				});
			}else if(options.styles=="click"){
				oNumsUL.hover(function(){
					clearTimeout(st);					   
				},function(){
					st=setTimeout(lunbo,options.time);
					index=$("#"+options.numsUL).find(".current").index()+1;		
				});
				oNumsUL.click(function(){
					lbOperate($(this).index());				  
				});	
			}
			
		}
			});	  
		})(jQuery);
		$(function(){
			$.lbShow({
				picUL:"banner_list",
				numsUL:"num_ul",
				styles:"hover"
			});
		});
		</script> 
</body>
</html>
